<include file='Public:head'/>
<link rel="stylesheet" href="__PUBLIC__/css/login.css"/>
<style>
#inputs input
{
    background: #f1f1f1 url(__PUBLIC__/imgs/login-sprite.png) no-repeat;
    padding: 15px 15px 15px 30px;
    margin: 0 0 10px 0;
    width: 353px; /* 353 + 2 + 45 = 400 */
    border: 1px solid #ccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
    box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff;
}
</style>
<div id="logo">
    <img id="logo_img" src="__PUBLIC__/imgs/logo.png" alt="">
</div>
<form id="login" name="login" method="post" action="{:U(GROUP_NAME . '/Login/login')}">
    <h1>Log In</h1>
    <fieldset id="inputs">
        <input id="username" name="username" type="text" placeholder="Username" autofocus required>   
        <input id="password" name="password" type="password" placeholder="Password" required>
        <input id="verify" name="verify" style="background: none;width: 150px;" type="text" placeholder='Verify' autocomplete="off" required>
        <div id="warning"></div>
    </fieldset>
    <img id="verify_img" style="width: 100px;height: 42px;position: absolute;right: 120px;top: 200px;" src="{:U(GROUP_NAME . '/Login/verify')}" alt="">
    <fieldset id="actions">
        <input type="submit" id="submit" value="Log in">
        <a href="{:U(GROUP_NAME . '/Login/forgetPassword')}">Forgot your password?</a>
        <a href="{:U(GROUP_NAME . '/Login/register')}">Register</a>
        <a href="javascript::;"  style="margin-right:92px;text-decoration:none;color:black;cursor:default">
        <span style='margin-bottom:4px;'>remember me</span>
        <input style="margin-top:5px;" type="checkbox" id="re"/></a>
    </fieldset>
</form>
<br><br>
<div style="text-align:center;clear:both">

</div>

<script>
    $(function(){
        var username=null;
        var stat=null;
        $('#verify_img').click(function(){
            change_code();
        });
        if(username = getCookie('user_email')){
            $('#username').val(username);
            $('#password').val(getCookie('user_password'));
            $('#re').attr('checked',true);
            $('#sub').attr('disabled',false);
            stat = true;
        }
        $('#re').onclick=function(){
            if(stat){
                removeCookie('user_password');
                removeCookie('user_email');
                $('#re').attr('checked',false);
                stat=false;
            }
            else{
                setCookie('user_password',$('#password').val(),365);
                setCookie('user_email',$('#username').val(),365);
                $('#re').attr('checked',true);
                stat=true;
            }

            //setCookie getCookie removeCookie
        }
        
        // $('#submit').bind('click',function(){
        //     if($('#username').val()&&$('#password').val()&&$('#verify').val()){
        //         $('#login').submit();
        //     }
        //     else{
        //         alert('输入信息不完全');
        //     }
        // })
        $('#verify').bind('blur',function(){
            $.post("{:U(GROUP_NAME . '/Login/ajaxVerify')}",{verify:$(this).val()},function(data){
                if(!data.status){
                    $('#warning').html('验证码错误，请重新输入').css({
                            color:'red'
                        });
                }
                else{
                    $('#warning').html('');
                }
            })
        })
    })
    function change_code() {
        $("#verify_img").attr("src", "{:U(GROUP_NAME . '/Login/verify')}" + '/' + Math.random());
    }
    function setCookie(name, value, iDay)
    {
        var oDate=new Date();
        
        oDate.setDate(oDate.getDate()+iDay);
        
        document.cookie=name+'='+value+';expires='+oDate;
    }

    function getCookie(name)
    {
        //'username=abc; password=123456; aaa=123; bbb=4r4er'
        var arr=document.cookie.split('; ');
        var i=0;
        
        //arr->['username=abc', 'password=123456', ...]
        
        for(i=0;i<arr.length;i++)
        {
            //arr2->['username', 'abc']
            var arr2=arr[i].split('=');
            
            if(arr2[0]==name)
            {
                return arr2[1];
            }
        }
        
        return '';
    }

    function removeCookie(name)
    {
        setCookie(name, '1', -1);
    }
</script>
<include file='Public:footer/'>